<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.shoppingcar{
			margin: 0 auto;
			width: 1100px;
			height: 551px;
		}
		#shoppingcarul li{
			width: 100%;
			height: 136px;
			list-style: none;
			border:1px solid black;
			line-height: 136px;
			margin-bottom: 20px;
		}
		#shoppingcarul li img{
			display: block;
			float: left;
			height: 137px;
			margin-right: 100px;
		}
		#onePrice{
			display: block;
			height: 100%;
			float: left;
			margin-right: 200px;
		}
		#onePrice1{
			display: block;
			height: 100%;
			float: left;
			margin-right: 200px;
		}
		.abnum{
			width: 190px;
			height: 40px;
			float: left;
		}
		.abnum .numchange{
			width: 36px;
			height: 36px;
			border:1px solid black;
			margin:0 30px;
		}
	</style>
</head>
<body>
	<div class="shoppingcar">
		<ul id="shoppingcarul">
			<li id="li">
				<img src="images/shirt_03.png" alt="">
				<span style="float: left;">$</span>
				<span id="onePrice">79.00</span>
				<div class="abnum">
					<span id="add" class="numchange">+</span>
					<span id="num">1</span>
					<span id="jian" class="numchange">-</span>
				</div>
				<span id="chacha">X</span>
			</li>
			<li id="li1">
				<img src="images/shirt_03.png" alt="">
				<span style="float: left;">$</span>
				<span id="onePrice1">79.00</span>
				<div class="abnum">
					<span id="add1" class="numchange">+</span>
					<span id="num">1</span>
					<span id="jian1" class="numchange">-</span>
				</div>
				<span id="chacha1">X</span>
			</li>
		</ul>
		<p><span>$</span><span id="allPrice">0.00</span></p>
	</div>
	<script>
		function v(e){
			return document.getElementById(e)
		}
		var add= v("add");
		var add1= v("add1");
		var jian=v("jian");
		var jian1=v("jian1");
		var onePrice=v("onePrice").innerHTML;
		var onePrice1=v("onePrice1").innerHTML;
		var danjia=parseInt(onePrice);
		var danjia1=parseInt(onePrice1);
		var all=v("allPrice");
		var zongjia=parseInt(all.innerHTML);

		var lipri=0;
		add.onclick=function(){
			lipri+=danjia;
			zongjia+=danjia;
			all.innerHTML=zongjia;
		}
		jian.onclick=function(){
			if (lipri>=danjia) {
				lipri-=danjia;
				zongjia-=danjia;
				all.innerHTML=zongjia;
			}else{

			}
		}
		var lipri1=0;
		add1.onclick=function(){
			lipri1+=danjia;
			zongjia+=danjia1;
			all.innerHTML=zongjia;
		}
		jian1.onclick=function(){
			if (lipri1>=danjia1) {
				lipri1-=danjia;
				zongjia-=danjia1;
				all.innerHTML=zongjia;
			}else{
			}
		}
		var xx=v("chacha");
		var li=v("li");
		var xx1=v("chacha1");
		var li1=v("li1");
		xx.onclick=function(){
			li.style.display="none";
			all.innerHTML-=lipri;
		}
		xx1.onclick=function(){
			li1.style.display="none";
			all.innerHTML-=lipri1;
		}
	</script>
</body>
</html>